<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/3nod_web/layui/css/layui.css">
    <script src="/3nod_web/js/echarts.common.min.js"></script>
    <title>来料批合格率状况</title>
</head>
<body>
<input type="hidden" th:value="${session.suppliedMaterialsCheckWeekReportList}"
       id="suppliedMaterialsCheckWeekReportList"/>
<input type="hidden" th:value="${session.weekList}" id="weekList"/>
<h1>来料批合格率状况</h1>
<div style="height:400px;width: 1000px;" id="main"></div>
<script src="/3nod_web/layui/layui.all.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var $ = jquery = layui.jquery;
    $.get("/3nod_web/charts/suppliedMaterialsCheckMonthReportList", function (data) {
        var monthList = data.data.monthList;
        var percentOfPassArray = [];
        var suppliedMaterialsCheckMonthReportVoList = data.data.suppliedMaterialsCheckMonthReportVoList;
        for (var i = 0; i < suppliedMaterialsCheckMonthReportVoList.length; i++) {
            percentOfPassArray[i] = suppliedMaterialsCheckMonthReportVoList[i].percentOfPass;
        }
        console.log(percentOfPassArray);
        var option = {
            legend: {
                selectedMode: false,//不可点击
                data: ['合格率', '目标值99%']
            },
            xAxis: {
                data: monthList,
                name: '月'
            },
            yAxis: [{
                type: 'value',
                name: '合格率'
            },
                {
                    type: 'value'
                }
            ],
            series: [{
                name:"合格率",
                data: percentOfPassArray,
                type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'black'
                            },
                            formatter: '{c}%'
                        },
                        color: function(params) {
                            var colorList = [ '#61a0a8'];
                            return colorList[params.dataIndex]
                        }
                    }
                }
            }, {
                name: '目标值99%',
                type: 'line',
                yAxisIndex: 1,//索引从0开始
                data: [99,99,99,99,99,99,99,99,99,99,99,99]
            }
            ]

        };
        myChart.setOption(option);
    });
</script>
</body>
</html>